{include file="public/header"/}
<script src="{__PUBLIC_PATH}/common/js/jquery.js?v={$version}"></script>
<script src="{__PUBLIC_PATH}/admin/pcf/global.js?v={$version}"></script>
<link rel="stylesheet" type="text/css" href="{__PUBLIC_PATH}/common/plugins/codemirror/codemirror.css?v={$version}">
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/codemirror.js?v={$version}"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/xml/xml.js?v={$version}"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/javascript/javascript.js?v={$version}"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/css/css.js?v={$version}"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/php/php.js?v={$version}"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/clike/clike.js?v={$version}"></script>
<script type="text/javascript" src="{__PUBLIC_PATH}/common/plugins/codemirror/mode/htmlmixed/htmlmixed.js?v={$version}"></script>
</head>
<body>
<style>
.pcfts{font:bold 14px/20px tahoma,verdana;color:#F60;vertical-align:middle;display:inline-block;margin-right:5px;margin-left:-14px;}
.layui-layer-btn-c{background:#F8F8F8;}
#txt_filename{float:left;line-height:38px;color:#F60;}
@media screen and (max-width:500px){
.layui-layer.layui-layer-page{width:100%!important;overflow:hidden!important;left:0!important;}
.layui-layer-title{width:100%!important;box-sizing:border-box;}
.layui-layer-content{width:100%!important;}
}
@media screen and (max-width:450px) {
.layui-form-select .layui-edge {top:78%;}
}
</style>
<div class="layui-fluid" style="overflow:hidden;padding:0;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label"><b class="pcfts">*</b> 模板目录</label>
                            <div class="layui-input-inline" style="width:100px">
                                <span style="float:left;line-height:38px;">/template/{$tpl_theme}/</span>
                            </div>
                            <div class="layui-input-inline">
                                <select name="tpldir" id="tpldir" tabindex="1" lay-verify="required">
                                    {volist name="tpldirList" id="vo"}
                                        <option value="{$vo}">{$vo}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><b class="pcfts">*</b> 文件名称</label>
                            <div class="layui-input-inline" style="width:350px;">
                                <span style="float:left;line-height:38px;margin-right:4px;">{$type}_{$nid}
                                <font id="font_filename"></font>
                                </span>
                                <input style="width:160px;float:left" type="text" id="filename" name="filename" lay-verify="required" value="" placeholder="自定义" class="layui-input">
                                <span style="float:left;line-height:38px;margin-left:4px;margin-right:8px;">.html</span>
                                <span id="txt_filename"></span>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">HTML代码</label>
                            <div class="layui-input-block">
                                <textarea name="content" id="content" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="hidden" name="type" value="{$type}"/>
                                <input type="hidden" name="nid" value="{$nid}"/>
                                <button class="layui-btn" lay-submit lay-filter="formSubmit">确认提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script>
    layui.use(['layer', 'form'], function () {
        var $ = layui.$,
        layer = layui.layer,
        form = layui.form;

        var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
            lineNumbers: true, // 显示行号
            lineWrapping: true, // 在行槽中添加行号显示器、折叠器、语法检测器
            mode: 'text/html'
        });

        $('#filename').keyup(function(){
            var filename = $(this).val();
            if (filename) {
                $('#font_filename').html('_');
            } else {
                $('#font_filename').html('');
                $('#txt_filename').html('');
            }
            $.ajax({
                type: "POST",
                url: "{:url('/arctype/ajax_newtpl', ['nosubmit'=>1])}",
                data: {filename:filename},
                dataType: 'json',
                success: function (res) {
                    if(res.status){
                        $('#txt_filename').html('');
                    } else {
                        $('#txt_filename').html(res.msg);
                    }
                }
            });
        });

        //监听提交
        form.on('submit(formSubmit)', function(data){
            layer.msg('正在处理请勿刷新页面', {icon: 16,shade: 0.01,time:3600000});
            data.field.content = editor.getValue();
            $.ajax({
                type : 'post',
                url : "{:url('/arctype/ajax_newtpl')}",
                data : data.field,
                dataType : 'json',
                success : function(res){
                    layer.closeAll('loading');
                    if(res.status){
                        parent.layer.closeAll();
                        if ('lists' == res.data.type) {
                            var id = 'templist';
                        } else {
                            var id = 'tempview';
                        }
                        $('#'+id, window.parent.document).append('<option value="'+res.data.filename+'" selected="true">'+res.data.filename+'</option>');
                        parent.formRender();
                        parent.layer.msg(res.msg, {icon: 1, time: 1000});
                        return false;
                    }else{
                        layer.closeAll();
                        if (res.data.focus) {
                            $('#'+res.data.focus).focus();
                        }
                        layer.msg(res.msg, {icon: 2, time: 1000});
                        return false;
                    }
                },
                error: function(e){
                    layer.closeAll('loading');
                    layer.msg("未知错误，操作中断！", {icon: 2, time: 1000});
                }
            });
            return false;
        });
    });
</script>
